<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- Bootstrap -->
<link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath() %>/static/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="<%=request.getContextPath() %>/static/css/jumbotron.css" rel="stylesheet">



<script src="<%=request.getContextPath() %>/static/js/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
  <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
  
<![endif]-->




<title>招招社区</title>

<style>
	body {
	  padding-top: 0px;
	}
	.bgcol{
		background-color:rgb(250,250,250);
	}
	.newspaperleftitem{
		background-color:rgb(250,250,250);
		text-align:center;
		margin-right:3px;
		margin-bottom:8px;
		padding-right:0px;
	}
	.newspapermiddleitem{
		background-color:rgb(250,250,250);
		text-align:center;
		margin-left:3px;
		margin-right:3px;
		margin-bottom:8px;
		padding-left:0px;
		padding-right:0px;
	}
	.newspaperrightitem{
		background-color:rgb(250,250,250);
		text-align:center;
		margin-left:3px;
		margin-bottom:8px;
		padding-left:0px;
		
	}
	.acolor{
		color:#666;
	}
	.slidename{
		background-color:#555;
		color:white;
		text-align:center;
		font-size:15px;
		font-weight:bold;
	}
	.moretopic{
		margin:20px 10px;
		background-color:rgb(240,240,240);
		text-align:center;
		padding:8px;
		color:black;
		border-radius:10px;
	}
	.moretopic a{
		text-decoration:none;
		color:black;
		cursor:pointer;
	}
	.pnowrap{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
</style>
<style type="text/css">
.navbar-search-box {
  border:1px;
  border-radius: 30px;
  background-color:#ccc;
}
.navbar-search-box input {
  width:300px;
  border: none;
  background-color: transparent;
}
.navbar-search-box a {
  padding: 10px;
  margin:0px;
  vertical-align:middle;
}
.navbar-search-box a:hover {

}

.navbar-area-list li.active {
  border-radius: 30px;
  color: white;
  background-color: green;
}
</style>
</head>
<body>

<div class="row" style="width:100%;background-color:black;height:300px;"></div>

<div class="container-fluid" style="background-color:rgb(250,250,250)">
	<div class="row" style="margin-top:90px">
		<div class="col-xs-1"></div>
		<div class="col-xs-7" style="padding-right:30px">
			<div class="row" style="font-size:18px;font-weight:bold;">已关注的话题</div>
			<div class="row" style="background:white;border-radius:8px">
				<c:forEach var="item" items="${topics}">
					<div class="col-xs-2">
						<div class="row text-center" style="margin:10px;background-color:rgb(250,250,250)">
						<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
						</div>
						<div class="row text-center" style="font-weight:bold;font-size:15px">
							#${item.topicname }#
						</div>
						<div class="row text-center" style="font-size:11px">
							问答:${item.questions.size() }&nbsp;&nbsp;关注：0
						</div>
					</div>
				</c:forEach>
			</div>
			<div class="row" style="background:white">
				<div class="row moretopic"><a>展开更多</a></div>
			</div>
			
			
			
			
			<div class="row" style="font-size:18px;font-weight:bold;border-radius:8px;margin-top:50px">话题广场</div>
			<div class="row" style="background:white">
				<c:forEach var="item" items="${topics}">
					<div class="col-xs-6">
						<div class="col-xs-4">
							<div class="row text-center" style="margin:10px;background-color:rgb(250,250,250)">
							<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
							</div>
						</div>
						<div class="col-xs-8">
							<div class="row" style="font-weight:bold;font-size:15px">
								#${item.topicname }#
							</div>
							<div class="row" style="font-size:11px">
								问答:<span style="color:green">${item.questions.size() }</span>&nbsp;&nbsp;关注：<span style="color:green">0</span>
							</div>
							<c:forEach var="subitem" items="${item.questions }">
								<div class="row" >
									<p class="pnowrap">${item.questions[1].qcontent }</p>
								</div>
							</c:forEach>
						</div>
					</div>
				</c:forEach>
			</div>
			<div class="row" style="background:white">
				<div class="row moretopic"><a>展开更多</a></div>
			</div>
			
			
			
			
			

			<div class="row">
				<div class="col-xs-6 text-left" style="font-size:18px;font-weight:bold;padding-left:0px;padding-right:0px">话题</div>
				<div class="col-xs-6 text-right" style="padding-left:0px;padding-right:0px">
				<a class="acolor">更多话题<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>
			<br/>
			<c:forEach var="item" items="${topics}">
				<div  class="row bgcol">
					<div  class="col-xs-3" >
						<div class="row text-center" style="margin-top:20%">
						<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
						</div>
						<div class="row text-center" style="font-weight:bold;font-size:15px">
							#${item.topicname }#
						</div>
						<div class="row text-center" style="font-size:11px">
							问答:${item.questions.size() }&nbsp;&nbsp;关注：0
						</div>
						<div class="row text-center">
						<button class="btn btn-success btn-sm" type="button">关注话题</button>
						</div>
						<br/>
					</div>
					<div class="col-xs-9">
						<c:forEach var="subitem" items="${item.questions }">
							<div class="row text-left" style="font-size:15px;font-weight:bold">
								${subitem.qtitle }
							</div>
							<div class="row" ><p style="width:100%;text-overflow: -o-ellipsis-lastline;word-break: break-all;text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;">${subitem.qcontent }</p></div>
							<div class="row">
								<a><span class="glyphicon glyphicon-comment" style="font-size:11px">评论${subitem.comments.size() } </span></a>&nbsp;&nbsp;
								<a><span class="glyphicon glyphicon-thumbs-up" style="font-size:11px">支持</span></a>&nbsp;&nbsp;
								<a><span class="glyphicon glyphicon-star" style="font-size:11px">收藏</span></a>&nbsp;&nbsp;
							</div>
							<br/>
						</c:forEach>
					</div>
				</div>
				<br/>
			</c:forEach>
			<div class="row">
				<div class="col-xs-6 text-left" style="font-size:18px;font-weight:bold;padding-left:0px;padding-right:0px">日报</div>
				<div class="col-xs-6 text-right" style="padding-left:0px;padding-right:0px">
				<a class="acolor">更多日报<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>
			<br/>
			<div  class="row">
				<div class="col-xs-4 newspaperleftitem" >
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
				<div class="col-xs-4 newspapermiddleitem">
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
				<div class="col-xs-4 newspaperrightitem">
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
			</div>
			<div  class="row">
				<div class="col-xs-4 newspaperleftitem">
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
				<div class="col-xs-4 newspapermiddleitem">
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
				<div class="col-xs-4 newspaperrightitem">
					<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="..." class="img-rounded">
					<h4>你好</h4>
					<span class="text-muted">Something else</span>
				</div>
			</div>
			
			<br/>

		
		</div>
		 
		<div class="col-xs-3">
			<div class="row bgcol" style="margin-top:26px;margin-left:5px;margin-right:10px">
				  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
					  </ol>
					
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner" role="listbox">
					    <div class="item active">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=1"><img src="<%=request.getContextPath() %>/static/image/CTM-1.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">许浩</div>
					    </div>
					    
					     <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=20">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-2.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">周武爱</div>
					    </div>
					    
					      <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=25">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-3.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">周长江</div>
					    </div>
					      <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=42">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-4.jpg" alt=""></a>
					      <div class="carousel-caption">
					      </div>
					      <div class="row slidename">姚康</div>
					    </div>
					   
					    
					  </div>
					
					  <!-- Controls -->
					  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					    <span class="sr-only">前一个</span>
					  </a>
					  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					    <span class="sr-only">后一个</span>
					  </a>
					 </div>
			</div>
			
			
			
			
			<div class="row" style="font-size:18px;font-weight:bold;border-radius:8px;margin-top:50px;margin-left:5px;margin-right:10px">热门话题</div>
			<c:forEach var="item" items="${topics}">
				<div class="row">
					<div class="col-xs-4">
						<div class="row text-center" style="background-color:rgb(250,250,250)">
							<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
						</div>
					</div>
					<div class="col-xs-8">
						<div class="row" style="font-weight:bold;font-size:15px">
							#${item.topicname }#
						</div>
						<div class="row" style="font-size:11px">
							问答:<span style="color:green">${item.questions.size() }</span>&nbsp;&nbsp;关注：<span style="color:green">0</span>
						</div>
						<c:if test="${item.questions.size() ne 0 }">
						<div class="row">
							<p class="pnowrap">${item.questions[1].qcontent }</p>
						</div>
						</c:if>
					</div>
				</div>
			</c:forEach>

			<div class="row" style="margin-top:20px;margin-bottom:10px;margin-left:5px;margin-right:10px">
				<div class="col-xs-6 text-left" style="font-size:18px;font-weight:bold;padding-left:0px;padding-right:0px">相关问题</div>
				<div class="col-xs-6 text-right" style="padding-left:0px;padding-right:0px">
				<a class="acolor">查看全部<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>  			
  			<div class="list-group panel panel-default">
    			<c:forEach var="item" items="${questions }">
					<p class="list-group-item-text" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><a class="acolor" href="">${item.qcontent }</a></p>
					<small>${item.comments.size() }个回答</small>
				</c:forEach>
			</div>
  			
  			
  			<div class="row" style="margin-top:20px;margin-bottom:10px;margin-left:5px;margin-right:10px">
				<div class="col-xs-6 text-left" style="font-size:18px;font-weight:bold;padding-left:0px;padding-right:0px">问答行家</div>
				<div class="col-xs-6 text-right" style="padding-left:0px;padding-right:0px">
				<a class="acolor">查看全部<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>
			<div class="panel panel-default">
				<c:forEach var="item" items="${questions }">
					<div class="panel-body">
					<a class="acolor" href="<%=request.getContextPath() %>/Info/ShowInfo">${item.qcontent }</a>
					<br/>${item.comments.size() }个回答
					</div>
				</c:forEach>
  			</div>

		</div>
		<div class="col-xs-1"></div>

	</div>
</div>
</body>
</html>